<template>
  <div :class="className" :style="{height:height,width:width}" />
</template>

<script>
import echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
import resize from './mixins/resize'
import { getPieData } from '@/api/jiagong/show'

export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '300px'
    }
  },
  data() {
    return {
      chart: null
    }
  },
  mounted() {
    this.$nextTick(() => {
      //getPieData().then((response) => {
      //const pieData = response.data
      //this.initEcharts()
      //this.initEcharts(pieData)
    })
      this.initChart()
    //})
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    //initChart(pieData) {
    initChart() {
      this.chart = echarts.init(this.$el, 'macarons')

      this.chart.setOption({
          tooltip: {
    trigger: 'item'
  },
  legend: {
    top: '5%',
    left: 'center'
  },
  series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: ['40%', '70%'],
      avoidLabelOverlap: false,
      itemStyle: {
        borderRadius: 10,
        borderColor: '#fff',
        borderWidth: 2
      },
      label: {
        show: false,
        position: 'center'
      },
      emphasis: {
        label: {
          show: true,
          fontSize: '40',
          fontWeight: 'bold'
        }
      },
      labelLine: {
        show: false
      },
      data: [
        //pieData
        { value: 4, name: '蘑菇鸡肉汤' },
        { value: 2, name: '炭烤多春鱼' },
        { value: 6, name: '烤牛排' },
        { value: 5, name: '西冷牛排配红酒烧司' },
        { value: 4, name: '黄金大虾' },
        { value: 2, name: '果酱吐司' },
        { value: 5, name: '凉拌拼盘' },
        { value: 2, name: '苹果草莓沙冰' },
        { value: 3, name: '炸培根鸡肉卷' },
        { value: 5, name: '意大利提拉米苏' }
      ]
    }
  ]
      })
    }
  }
}
</script>
